<template>
  <div class="sidebar">

    <div class="pc" >
      <div class="title">表单域组件</div>
      <draggable v-model="formComponents" class="component-list-wrap" :move="onMove" :options="{group:{name: 'site',pull:'clone',put:false},sort: false}" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <div v-for="item in formComponents" :key="item.type">
          <i class="iconfont" :class="item.icon"></i>
          <span> {{item.name}}</span>
        </div>
      </draggable>
      <div class="title">隐藏域组件</div>
      <draggable v-model="hiddenComponents" class="component-list-wrap" :move="onMove" :options="{group:{name: 'hidden',pull:'clone',put:false},sort: false}" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <div v-for="item in hiddenComponents" :key="item.type">
          <i class="iconfont" :class="item.icon"></i>
          <span> {{item.name}}</span>
        </div>
      </draggable>
      <div class="title">显示域组件</div>
      <draggable v-model="showComponents" class="component-list-wrap" :move="onMove" :options="{group:{name: 'site',pull:'clone',put:false},sort: false}" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <div v-for="item in showComponents" :key="item.type">
          <i class="iconfont" :class="item.icon"></i>
          <span> {{item.name}}</span>
        </div>
      </draggable>
      <div class="title">容器组件</div>
      <draggable v-model="layoutComponents" class="component-list-wrap" :move="onMove" :options="{group:{name: 'site',pull:'clone',put:false},sort: false}" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <div v-for="item in layoutComponents" :key="item.type">
          <i class="iconfont" :class="item.icon"></i>
          <span> {{item.name}}</span>
        </div>
      </draggable>
      <div class="title">图表组件</div>
      <draggable v-model="chartComponents" class="component-list-wrap" :move="onMove" :options="{group:{name: 'site',pull:'clone',put:false},sort: false}" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <div v-for="item in chartComponents" :key="item.type">
          <i class="iconfont" :class="item.icon"></i>
          <span> {{item.name}}</span>
        </div>
      </draggable>
      <div class="title">业务组件</div>
      <draggable v-model="businessComponents" class="component-list-wrap" :move="onMove" :options="{group:{name: 'site',pull:'clone',put:false},sort: false}" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <div v-for="item in businessComponents" :key="item.type">
          <i class="iconfont" :class="item.icon"></i>
          <span> {{item.name}}</span>
        </div>
      </draggable>
    </div>



  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import {
  formComponents,
  hiddenComponents,
  showComponents,
  layoutComponents,
  chartComponents,
} from "@/low-code-components/basis-components/config/index";

import {
  businessComponents
} from "@/low-code-components/business-components/config/index";


export default {
    components: { Draggable },
    data () {
      return {
        drag: false,
        formComponents: formComponents,
        hiddenComponents: hiddenComponents,
        showComponents: showComponents,
        layoutComponents: layoutComponents,
        chartComponents: chartComponents,
        businessComponents: businessComponents
      }
    },
    methods: {
      onStart () {
        this.drag = true;
      },
      onEnd () {
        this.drag = false;
      },
      onMove () {
        return true
      },
    }
  }
</script>

<style  scoped>
/*定义要拖拽元素的样式*/
/* .ghostClass {
  background-color: blue !important;
} */

.chosenClass {
  background-color: skyblue !important;
  padding: 10px;
  opacity: 1 !important;
  color: white;
}

/* .dragClass {
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
  color: white;
} */

.wrap .title {
  padding: 6px 12px;
}
.wrap .component-list-wrap {
  padding-left: 15px;
}
.wrap .component-list-wrap i {
  color: #4388bc;
  opacity: 1;
  font-size: 14px;
}
.component-list-wrap::after {
  content: "";
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}

.component-list-wrap div {
  height: 30px;
  box-sizing: border-box;
  float: left;
  width: 40%;
  margin-right: 8px;
  margin-bottom: 5px;
  padding: 5px 10px;
  cursor: move;
  background: rgba(42, 160, 250, 0.2);
  font-weight: 400;
  color: #4388bc;
  border: 1px solid #ffffff;
}
.component-list-wrap div:hover {
  border: 1px dashed #2a9ff9;
}

.component-list-wrap > div {
  font-size: 13px;
  border-radius: 3px;
}
</style>